<template>
  <div class="main">
    <div class="empty" v-if="type == 0">
      <el-empty v-show="true" description="暂无数据"></el-empty>
    </div>
    <div class="video-wrap" v-if="type == 1">
      <video :src="row.url" controls autoplay></video>
    </div>
    <div class="pdf-wrap" v-if="type == 2">
      <div class="box"></div>
      <iframe :src="row.url" frameborder="0" class="iframe-pdf"></iframe>
    </div>
    <div class="img-wrap" v-if="type == 3">
      <img :src="row.url" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 0,
      row: {},
    }
  },
  mounted() {
    this.$bus.$on('changeResource', (type, row) => {
      this.type = type
      this.row = row
    })
  },
  beforeDestroy() {
    this.$bus.$off('changeResource')
  },
  methods: {},
}
</script>
<style scoped lang="scss">
.main {
  .empty {
    padding-top: 200px;
  }
  .img-wrap {
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 90px);
    display: flex;
    img {
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
  .video-wrap {
    video {
      width: 100%;
      height: calc(100vh - 90px);
      object-fit: fill; /* 保持视频比例 */
    }
  }
  .pdf-wrap {
    position: relative;
    .iframe-pdf {
      width: 100%;
      height: calc(100vh - 90px);
    }
    .box {
      position: absolute;
      top: 12px;
      right: 50px;

      width: 70px;
      height: 30px;
      background: #323639;
    }
  }
}
</style>